<template>
	<view class="pageBack">
		<!-- #ifdef H5 -->
		<topOpenBar url="shopDetail" :id="shopData.id"></topOpenBar>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<ttBar :title="shopData.name.length>8?(shopData.name.substr(0,8)+'...'):shopData.name" leftIcon="icon-back" >
			<template v-slot:rightCnt>
				<text class="iconfont icon-home rIcon" @tap="toHome"></text>
			</template>
		</ttBar>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="content" style="background-color: #FFFFFF;padding-top: 40upx;">
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="content" style="background-color: #FFFFFF;">
		<!-- #endif -->
			<shopSwiper :swiperList="bannerList" :dotsStyles="dotsStyles"></shopSwiper>
			<view class="shopCard">
				<view class="shopInfo">
					<view class="imgBox">
						<image :src="shopData.logo?shopData.logo:'../../static/loding.png'"></image>
					</view>
					<view class="infoBox">
						<view class="nameBox">
							<text class="shopName">{{shopData.name}}</text>
							<!-- #ifndef H5 -->
							<view class="shareBox" @tap="share">
								<text class="iconfont icon-share"></text>
								<text>分享</text>
							</view>
							<!-- #endif -->
							
						</view>
						<view class="shopPf">
							<text>教学 {{shopData.teachScore==0?5.0:shopData.teachScore}}</text>
							<!-- <text>环境 {{shopData.envScore}}</text> -->
							<text>服务 {{shopData.serverScore==0?5.0:shopData.serverScore}}</text>
						</view>
						<shopStar :star="shopData.score"></shopStar>
					</view>
				</view>
				<view class="shopCount">
					<view class="countItem">
						<text>{{shopData.soldCnt}}</text>
						<text>预约</text>
					</view>
					<view class="countItem">
						<text>{{shopData.teacherList.length}}</text>
						<text>教师</text>
					</view>
					<view class="countItem">
						<text>{{shopData.courseCnt}}</text>
						<text>课程</text>
					</view>
				</view>
			</view>
		</view>
		<view class="shopHonour">
			<view class="honourItem">
				<view class="item" @tap="toPage" :data-id="shopData.id" data-type="3" data-url="certificateShop">
					<text class="iconfont icon-cockade"></text>
					<text class="itemText">荣誉展示</text>
				</view>
				<view class="item" @tap="toPage" :data-id="shopData.id" data-type="1" data-url="certificateShop">
					<text class="iconfont icon-xuesheng"></text>
					<text class="itemText">教学风采</text>
				</view>
				<view class="item" @tap="toPage" :data-id="shopData.id" data-type="2" data-url="certificateShop">
					<text class="iconfont icon-huanjing"></text>
					<text class="itemText">教学环境</text>
				</view>
			</view>
			<!-- <text class="iconfont icon-gengduo"></text> -->
		</view>
		<view class="addressBox">
			<view class="textBox">
				<text class="address">{{shopData.address}}</text>
				<!-- <text class="phone">{{shopData.phone}}</text> -->
			</view>
			<!-- #ifndef H5 -->
			<view class="optBox">
				<image src="../../static/address.png" @tap="toShopMap"></image>
				<image src="../../static/tel.png" @tap="callNumber"></image>
			</view>
			<!-- #endif -->
			
		</view>
		
		<view class="tcInfo" v-if="shopData.type==2">
			<teacherCard :teacherInfo="teacherInfo"></teacherCard>
			<view class="certificateBox">
				<view class="certificateItem" @tap="toPage" data-url="certificate" data-type="3" :data-id="teacherInfo.id">
					<image src="../../static/tc1.png"></image>
					<text>资质证书</text>
				</view>
				<view class="certificateItem" @tap="toPage" data-url="certificate" data-type="4" :data-id="teacherInfo.id">
					<image src="../../static/tc2.png"></image>
					<text>荣誉证书</text>
				</view>
				<view class="certificateItem" @tap="toPage" data-url="certificate" data-type="6" :data-id="teacherInfo.id">
					<image src="../../static/tc3.png"></image>
					<text>技能证书</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="mottoAndIntroduction">
				<view class="mottoBox">
					<text class="title">教育格言</text>
					<text class="text">{{teacherInfo.motto}}</text>
				</view>
				<view class="line"></view>
				<view class="introductionBox">
					<text class="title">教师简介</text>
					<text class="text">{{teacherInfo.desc}}</text>
				</view>
			</view>
		</view> 
		
		<block v-if="shopData.teacherList.length>0 && shopData.type==1">
		
		
		<!-- <block v-if="shopData.teacherList.length>0"> -->
			<teacherList :tList="shopData.teacherList" :storeId="shopData.id"></teacherList>
			
		</block>
		
		<view class="shopTagBox">
			<view class="titleBox" @tap="toPage" data-url="shopGoods"  :data-sid="shopData.id" :data-sname="shopData.name">
				<text class="title">课程中心</text>
				<text class="title2">全部课程</text>
				<text class="iconfont icon-right"></text>
			</view>
			<!-- <view class="tagList">
				<text class="tagItem">英语口语</text>
				<text class="tagItem active">英语口语</text>
				<text class="tagItem">英语口语</text>
			</view> -->
		</view>
		<view class="goodList">
			<view class="goodBox">
				<view class="leftBox">
						<goodItem v-for="(item,index) in listData" :key="index" v-if="index%2==0" :goodInfo="item" ></goodItem>
				</view>
				<view class="rightBox">
						<goodItem v-for="(item,index) in listData" :key="index" v-if="index%2==1" :goodInfo="item" ></goodItem>
				</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<!-- <view class="rmdTitle">
			<image src="../../static/jingxuan.png"></image>
			<text>精选推荐</text>
		</view> -->
		<view class="shopCounsel">
			<!-- #ifdef H5 -->
			<a class="counselBtn" id="toApp" href="javascript:;" data-url="shopDetail" onclick="toApp()" :data-id="shopData.id">在线咨询</a>
			<!-- #endif -->
			
			<!-- #ifndef H5 -->
			<view class="gzBox" @tap="guanzhu">
				<text class="iconfont" :class="[shopData.fav==1?'icon-likefill':'icon-like']"></text>
				<text>{{shopData.fav==1?'已关注':'关注'}}</text>
			</view>
			<button class="counselBtn" @tap="zixun">在线咨询</button>
			<!-- #endif -->
			
			
			
		</view>
		<shareAction ref="shareAction" :id="shopData.id" :type="3"></shareAction>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import shopSwiper from "@/components/shopSwiper/shopSwiper.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import shopStar from "@/components/shopStar/shopStar.vue";
	import teacherList from "@/components/teacherList/teacherList.vue";
	import goodList from "@/components/goodList/goodList.vue";
	import goodItem from  "@/components/goodItem/goodItem.vue";
	import COMM from "@/common/common.js";
	import shareAction from "@/components/shareAction/shareAction.vue";
	import topOpenBar from "@/components/h5/topOpenBar.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar,
			shopSwiper,
			statusBar,
			shopStar,
			teacherList,
			goodList,
			goodItem,
			shareAction,
			topOpenBar
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		data() {
			return {
				bottom: uni.upx2px(105),
				shopData: {
					name:'店铺名',
					address: '南京新街口金鹰大厦2楼b10123123',
					tel: '025-44830256',
					swiperList: [],
					teacherList: []
				},
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 6,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius: 3
				},
				bannerList:[],
				shopId:0,
				page_no:1,
				page_size:10,
				hasNext:true,
				listData:[],
				teacherInfo:{}
			};
		},
		methods:{
			getData(){
				if(uni.getStorageSync("toShop")){
					this.shopData=uni.getStorageSync("toShop")
				}
				this.$store.dispatch("apiGetShopDetail",{
					id:this.shopId,
					userId:this.isLogin?this.userInfo.userId:0
				}).then(res=>{
					this.shopData=res.data.data;
					this.shopData.score=(this.shopData.score==0)?5.0:this.shopData.score;
					this.bannerList=res.data.data.resList.filter(x=>{
						return x.location==4
					})
					if(this.bannerList.length==0){
						this.bannerList=[
							{
								id:399,
								url:"../../static/loding.png",
								type:1,
								location:4,
								resStatus:2,
							}]
					}
					// if(this.shopData.type==2){
					// 	this.teacherInfo=this.shopData.teacherList[0]
					// }
					this.teacherInfo=this.shopData.teacherList[0]
					
				})
			},
			// 上传统计
			postTongji(){
				this.$store.dispatch("apiPostTongji",{
					storeId:this.shopId,
					type:1,
					userId:this.isLogin?this.userInfo.userId:0
				})
			},
			getGoodList(){
				
				let _data={};
				_data.page_no=this.page_no;
				_data.page_size=this.page_size;
				_data.storeId=this.shopId;
				this.$store.dispatch("apiSearchGood",_data)
				.then(res=>{
					this.listData=res.data.data.items.slice(0,6);
				})
				
			},
			guanzhu(){
				if(this.isLogin){
					this.$store.dispatch("apiFollowShop",{
						userId:this.userInfo.userId,
						linkId:this.shopData.id
					}).then(res=>{
						if(res.data.code==1){
							if(this.shopData.fav==0){
								uni.showToast({
									title: '关注成功',
									icon: 'success'
								});
							}else{
								uni.showToast({
									title: '已取消关注',
									icon: 'success'
								});
							}
							this.getData();
						}
					})
				}else{
					this.toPage('login')
				}
				
			},
			// 拨打电话
			callNumber() {
				COMM.callPhone(this.shopData.phone);
			},
			// 导航至店铺
			toShopMap(){
				COMM.toMapBylng(this.shopData)
			},
			zixun() {
				let _this = this;
				if (this.isLogin) {
					uni.showLoading({
						title: '',
						mask: false
					});
					let toImid = _this.shopData.imid;
					if (getApp().globalData.TIM_SDK_READY) {
						uni.hideLoading()
						_this.toPage({
							url: 'conversationDt',
							cvid: 'C2C' + toImid,
							toImId: toImid,
							sname:_this.shopData.name,
							slogo:_this.shopData.logo,
							sid:_this.shopData.id
						})
					} else {
						_this.$store.dispatch("timLogin",_this.userInfo.imid).then(res => {
							setTimeout(() => {
								uni.hideLoading()
								_this.toPage({
									url: 'conversationDt',
									cvid: 'C2C' + toImid,
									toImId: toImid,
									sname:_this.shopData.name,
									slogo:_this.shopData.logo,
									sid:_this.shopData.id
								})
							}, 1000)
			
						})
					}
				} else {
					this.toPage("login")
				}
			},
			toHome(){
				this.toPage({
					url:'index'
				})
			},
			// 分享
			share(){
				let _href='';
				if(this.isLogin){
					_href='pages/index/index?url=shopDetail&id='+this.shopData.id+'&uid='+this.userInfo.userId
				}else{
					_href='pages/index/index?url=shopDetail&id='+this.shopData.id
				}
				this.$refs.shareAction.setShareData({
					title:this.shopData.name,
					img:this.shopData.logo?this.shopData.logo:'http://s.de123.com/kf.png',
					href:_href,
					cntText:''
				})
				this.$refs.shareAction.open()
			}
		},
		onUnload() {
			uni.removeStorageSync("toShop");
		},
		onLoad(cfm) {
			this.shopId=cfm.id;
			this.getData()
			this.getGoodList();
			this.postTongji();
			setTimeout(()=>{
				this.$store.dispatch("apiReporgLog",{
					type:2,
					linkId:this.shopId
				})
			},1000);
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				this.getGoodList();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" scoped>
	.goodBox {
		background-color: #f6f6f6;
		padding:0 14rpx 20rpx 14rpx;
		display: flex;
		
		.leftBox,.rightBox{
			width: 50%;
			display: flex;
			padding: 0 14rpx;
			display: flex;
			flex-direction: column;
		}
		
	}
	.tcInfo{
		margin-top: 14upx;
	}
	.goodList{
		padding-bottom: 110upx;
		padding-top: 20upx;
	}
	.shopCard {
		display: flex;
		flex-direction: column;
		margin-top: 30upx;

		.shopInfo {
			display: flex;
			align-items: flex-start;

			.imgBox {
				width: 120upx;
				height: 120upx;
				margin-right: 54upx;

				image {
					display: block;
					width: 120upx;
					height: 120upx;
					// border-radius: 50%;
				}
			}

			.infoBox {
				display: flex;
				flex-direction: column;
				width: 100%;
				.nameBox{
					display: flex;
					align-items: center;
					position: relative;
					.shareBox{
						flex-shrink: 0;
						display: flex;
						height: 50upx;
						align-items: center;
						background-color: #EEEEEE;
						padding: 0 20upx;
						border-top-left-radius: 25upx;
						border-bottom-left-radius: 25upx;
						margin-left: 10upx;
						margin-right: -28upx;
						text{
							font-size: 24upx;
							color: #666666;
							font-weight: normal;
						}
						.iconfont{
							color: #666666;
							font-size: 32upx;
							margin-right: 6upx;
						}
					}
					
				}
				.shopName {
					font-size: 36upx;
					font-weight: bold;
					color: #202932;
					flex-grow: 1;
				}

				.shopPf {
					display: flex;
					margin-top: 16upx;

					text {
						font-size: 26rpx;
						color: #90959b;
						margin-right: 40upx;
					}
				}

				.starBox {
					display: flex;
					align-items: center;
					margin-top: 24upx;

					.starItem {
						width: 40upx;
						height: 40upx;
						border-radius: 6upx;
						background-color: #b8b8b8;
						margin-right: 10upx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							color: #FFFFFF;
							line-height: 40upx;

						}
					}

					>text {
						font-size: 30rpx;
						font-weight: bold;
						color: #90959b;
					}
				}
			}
		}

		.shopCount {
			padding-top: 44upx;
			padding-bottom: 28upx;
			display: flex;
			justify-content: space-around;

			.countItem {
				display: flex;
				flex-direction: column;

				text {
					text-align: center;
					font-size: 32upx;
					color: #202932;
					margin-bottom: 6upx;
				}
			}

		}
	}

	.shopHonour {
		margin-top: 13upx;
		background-color: #FFFFFF;
		padding: 28upx 0 ;
		display: flex;
		flex-direction: column;
		align-items: center;

		.honourItem {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 0 28upx 0 28upx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;

				text {
					font-size: 26rpx;
					color: #3b434d;
					margin-right: 10upx;
				}

				.iconfont {
					color: #feac42;
					font-size: 48upx;
				}
			}
		}

		>.iconfont {
			font-size: 28upx;
			color: #feac42;
			margin-top: 20upx;
		}
	}

	.addressBox {
		margin-top: 13upx;
		padding: 38upx 63upx 25upx 63upx;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: space-between;

		.textBox {
			display: flex;
			flex-direction: column;

			text {
				font-family: SimHei;
				font-size: 28rpx;
				color: #838890;
				margin-bottom: 10upx;
			}
		}

		.optBox {
			display: flex;
			flex-shrink: 0;

			image {
				width: 42upx;
				height: 42upx;
			}

			image:first-child {
				margin-right: 54upx;
			}
		}
	}

	.shopTagBox {
		display: flex;
		background-color: #FFFFFF;
		margin-top: 13upx;
		flex-direction: column;
		padding: 28upx;

		.titleBox {
			display: flex;
			align-items: baseline;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
				flex: 1;
			}

			.title2 {
				font-size: 28rpx;
				color: #9c9c9c;
			}

			.iconfont {
				font-size: 28upx;
				color: #9c9c9c;
				margin-left: 6upx;
			}
		}

		.tagList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.tagItem {
				height: 44rpx;
				font-size: 28rpx;
				color: #fec100;
				line-height: 40upx;
				border-radius: 22rpx;
				border: solid 2rpx #fec100;
				box-sizing: border-box;
				padding: 0 40upx;
			}

			.active {
				background-color: #fec100;
				color: #FFFFFF;
			}
		}
		
	}

	.rmdTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20upx;
		margin-top: 18upx;

		image {
			width: 28upx;
			height: 25upx;
			margin-right: 10upx;
		}

		text {
			font-size: 26upx;
			color: #d92810;
		}
	}

	.shopCounsel {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 105rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 40upx;
		.counselBtn {
			flex-grow: 1;
			width: 500rpx;
			height: 83rpx;
			background-image: linear-gradient(0deg,
				#feb201 0%,
				#fec200 100%),
				linear-gradient(#feac01,
				#feac01);
			background-blend-mode: normal,
				normal;
			border-radius: 21rpx;
			text-align: center;
			border: none;
			line-height: 83rpx;
			color: #FFFFFF;
			font-size: 29rpx;
			margin: 0;
			text-decoration: none;

		}

		.counselBtn:after {
			border: none;
		}
		.gzBox{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #666666;
			margin-right: 40upx;
			text{
				font-size: 20upx;
			}
			.iconfont{
				font-size: 44upx;
			}
			.icon-likefill{
				color: #ffcd11;
			}
		}
	}
	.certificateBox {
		background-color: #FFFFFF;
		border-bottom: 14upx solid #f4f4f4;
		display: flex;
		align-items: center;
		padding: 20upx;
	
		.certificateItem {
			width: 32%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	
			image {
				width: 60upx;
				height: 60upx;
			}
	
			text {
				margin-top: 16upx;
				font-size: 26rpx;
				color: #f79f21;
			}
		}
	
		.iconfont {
			color: #b7b7b7;
			font-size: 40upx;
		}
	}
	
	.mottoAndIntroduction {
		border-bottom: 14upx solid #f4f4f4;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 28upx 26upx;
	
		.mottoBox,
		.introductionBox {
			display: flex;
	
			.title {
				flex-shrink: 0;
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
			}
	
			.text {
				font-size: 28rpx;
				color: #202932;
				padding-left: 20upx;
				padding-top: 36upx;
			}
		}
	
		.line {
			height: 1px;
			background-color: #efefef;
			margin: 32upx;
		}
	}
	
	.shopBox {
		border-bottom: 14upx solid #f4f4f4;
	}
	
	.teachClassCnt {
		display: flex;
		flex-direction: column;
	
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
			background-color: #FFFFFF;
			padding: 46upx 26upx;
		}
	}
	.rIcon {
		font-size: 40upx;
		margin-left: 20upx;
	}
	.icon-home{
		font-size: 44upx!important;
	}
</style>
